<template>
  <div>
    <el-row class="m-b bg-white search-content">
      <div class="form-box">
        <SearchComp :searchData="searchData" :searchForm="searchForm" :searchHandle="searchHandle"></SearchComp>
      </div>
    </el-row>
    <div class="bg-white">
      <TableCompEle :tableData="tableData" :select="false" :indexNum="true" :tableConfig="tableConfig" :pagination="pagination" v-loading="loading">
      </TableCompEle>
      <pagination v-show="total > 0" :total="total" :page.sync="pagination.page" :limit.sync="pagination.size" @pagination="initData"
        @paginationSize="paginationSize()" />
    </div>
  </div>
</template>

<script>
import { getOperationLogList } from "@/api/log.js";
export default {
  data() {
    return {
      loading: false,
      total: 0,
      pagination: {
        page: 1,
        size: 10,
      },
      searchForm: [
        {
          type: "Select",
          label: "操作类型:",
          prop: "slType",
          filterable: true,
          options: [
            { label: "新增", value: "新增" },
            { label: "修改", value: "修改" },
            { label: "删除", value: "删除" },
          ],
          props: { label: "label", value: "value" },
          change: () => this.paginationSize(),
          placeholder: "请选择操作类型",
        },
        {
          type: "Input",
          label: "操作人:",
          prop: "slOperator",
          clearable: true,
          placeholder: "请输入操作人",
          change: () => {
            this.paginationSize();
          },
        },
        {
          type: "Date",
          label: "操作时间:",
          prop: "slOperatorTime",
          clearable: true,
          format: "yyyy-MM-dd",
          placeholder: "请选择操作时间",
          change: () => this.paginationSize(),
        },
      ],
      searchHandle: [
        {
          label: "重置",
          handle: () => this.reset(),
        },
      ],
      searchData: {
        slType: null,
        slOperator: null,
        slOperatorTime: null,
      },
      tableData: [],
      tableConfig: [
        {
          prop: "slResultCode",
          label: "状态码",
        },
        {
          prop: "slType",
          label: "操作类型",
        },
        {
          prop: "slMethod",
          label: "操作事件",
        },
        {
          prop: "slContent",
          label: "操作内容",
        },
        {
          prop: "slOperator",
          label: "操作人",
        },
        {
          prop: "slOperatorTime",
          label: "操作时间",
        },
      ],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      let params = {
        currentPage: this.pagination.page,
        pageSize: this.pagination.size,
        queryString: this.searchData,
      };
      getOperationLogList(params)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    paginationSize() {
      this.pagination.page = 1;
      this.initData();
    },
    reset() {
      this.searchData = {
        slType: null,
        slOperator: null,
        slOperatorTime: null,
      };
      this.paginationSize();
    },
  },
};
</script>

<style></style>
